<template>
	<view class="container">
		<view class="a01">
			<view class="s-header">可提现金额</view>
			<view class="amount">￥<span>{{balance}}</span></view>
			<view class="text" @tap="toMemberCentre">
				<image mode="widthFix" class="s-img" src="/static/icon_mingxi.png"></image>明细
			</view>
		</view>
		<view class="a02">
			<view class="s-header">提现方式</view>
			<view class="b02">
				<view class="img">
					<image src='/static/icon_wxzf.png'></image>微信
				</view>
				<view>你的微信号尚未绑定<text class="yticon icon-you"></text></view>
			</view>
		</view>
		<view class="a03">
			<view class="s-header">提现金额</view>
			<view class="b01">
				<view class="item" :class="row.colour" v-if="row.id <= 3" v-for="(row,index) in amountList" :key="index" @click="cash_click(row)">
					{{row.amount}}元
					<image :src="row.img" v-if="!row.colour"></image>
				</view>
				<view class="item c01" :class="row.colour" v-if="row.id > 3" v-for="(row,index) in amountList" :key="index" @click="cash_click(row)">
					{{row.amount}}元
					<image :src="row.img" v-if="!row.colour"></image>
				</view>
			</view>
			<view class="btn" @click="tiqu()">提取</view>
		</view>
		<view class="a04">
			<view class="s-header">提现金额</view>
			<view class="text">
				<text>1、每天您仅可申请一笔提现;(每笔提现将收取 0.1%的手续费，最低 1元)</text>
				<text>2、用户提现必须实名绑定微信号，提现审核通过后，系统将打款到你的微信零钱中。</text>
				<text>3、用户提取后可在微信 -- 钱包 -- 账单中查询提现金额的入账情况</text>
				<text>4、如有疑问请联系客服：0755-26913901</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {
		data() {
			return {
				amountList: [],
				balance: 0,
				headerTop: 0,
				//控制滑动效果
				typeClass: 'first',
				subState: '',
				type: '',
				money: '',
			}
		},
		onPageScroll(e) {

		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(options) {
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			this.type = options.type
			console.log("=======加载配置%s", this.type)
			
		},
		onShow(){
			this.loadData()
		},
		methods: {
			discard() {
				//丢弃
			},
			toMemberCentre() {
				uni.navigateTo({
					url: '/pages/user/expenditure'
				})
			},
			async loadData() {
				var _this = this
				var params = {

				};
				// navItem.orderList = []
				let data = await Api.apiCall('post', Api.withdraw.withdraw_config, params);
				if (data) {
					let all = data.configs
					all.forEach(function(item,index){
						
						if (item.is_vip === 1) {
							_this.$set(item, 'img', "/static/vip.png");
						} else {
							_this.$set(item, 'img', "");
						}
						if (index==0){
						_this.$set(item, 'colour', "yellow")
						_this.money = item.amount
						}else{
						_this.$set(item, 'colour', "")	
						}
					});
					this.amountList = all
					this.balance = data.balance
				}
			},
			cash_click(row) {
				this.money = row.amount
				row.colour = "yellow"
				// this.amountList.forEach(item => {
				// 	if (item.id != row.id) {
				// 		item.colour = ""
				// 	}
				// })
				this.amountList.forEach(function(item,index){
						if (item.id != row.id) {
							item.colour = ""
						}
				})
			},

		async tiqu() {
				if (this.balance < this.money) {
					uni.showToast({
						title: '余额不足',
						icon: "none"
					});
					return;
				}

				if (this.type == 1) {
					let is_vip = -1;
					this.amountList.forEach(item => {
						if (item.amount == this.money){
							is_vip = item.is_vip 
						}
					})
					if (is_vip > 0){
						uni.showToast({
							title: '请开通VIP权限',
							icon: "none"
						});
						return;
					}
					if(is_vip == -1){
						uni.showToast({
							title: '您选择的金额不存在',
							icon: "none"
						});
						return;
					}

				} 
				
				var params = {
					'money': this.money,
					'type': 'wechat'
				};
				// navItem.orderList = []
				let data = await Api.apiCall('post', Api.withdraw.p_withdraw, params);
				if(data){
					uni.showToast({
						title: '提现成功请等待平台审核',
						icon: "none"
					});
					this.balance = data.balance
				}
				
			},

		}

	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.container {
		border-top: 1upx solid #dedede;
	}

	.a01 {
		width: 100%;
		height: 248upx;
		padding: 0 30upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.s-header {
			height: 88upx;
			display: flex;
			align-items: center;
			font-size: $font-sm + 4upx;
			color: #232323;
		}

		.amount {
			display: flex;
			padding-bottom: 12upx;
			justify-content: center;
			align-items: center;
			color: #232323;
			font-size: $font-sm;

			span {
				font-size: $font-sm + 32upx;
			}
		}

		image {
			width: 30upx;
			height: 34upx;
			margin: 0 20upx 0 0;
		}

		.text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			color: #232323;
			font-size: 32upx;
		}
	}

	.a02 {
		width: 100%;
		height: 178upx;
		padding: 0 30upx;
		margin-top: 20upx;
		background-color: #fff;

		.s-header {
			height: 88upx;
			display: flex;
			align-items: center;
			font-size: $font-sm + 8upx;
			color: #232323;
		}

		.b02 {
			width: 100%;
			height: 72upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: $font-sm + 4upx;
			color: #ABADAD;

			.img {
				display: flex;
				align-items: center;
				padding-left: 10upx;
				color: #232323;
			}

			image {
				width: 44upx;
				height: 40upx;
				margin-right: 30upx;
			}
		}
	}

	.a03 {
		width: 100%;
		height: 468upx;
		padding: 0 30upx;
		margin-top: 20upx;
		background-color: #fff;

		.s-header {
			height: 88upx;
			display: flex;
			align-items: center;
			font-size: $font-sm + 8upx;
			color: #232323;
		}

		.b01 {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			.item {
				display: flex;
				width: 220upx;
				height: 98upx;
				border-radius: 12upx;
				justify-content: center;
				align-items: center;
				font-size: $font-sm + 8upx;
				color: #232323;
				border: 1upx solid #ACADAE;
				margin: 20upx 0;
				background-color: #fff;
				position: relative;

				image {
					position: absolute;
					width: 70upx;
					height: 68upx;
					top: 0upx;
					left: 146upx;
					// margin: 0 20upx;
				}
			}

			.yellow {
				background-color: #FFBC21;
				border: 0;
			}

			.c01 {
				margin: 0;
			}
		}

		.btn {
			width: 270upx;
			height: 68upx;
			margin: 40upx 210upx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 34upx;
			border: 1upx solid #757677;
		}
	}

	.a04 {
		width: 100%;
		height: 472upx;
		padding: 0 30upx 60upx;
		margin-top: 20upx;

		.s-header {
			height: 88upx;
			display: flex;
			align-items: center;
			font-size: $font-sm + 8upx;
			color: #232323;
		}

		.text {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			font-size: $font-sm + 4upx;
			color: #ACADAE;

			view {
				letter-spacing: 1.6upx;
				line-height: 1.7;
			}

			span {
				color: #FFBC21;
				padding-left: 30upx;
			}
		}

	}

	.user-section {
		width: 100%;
		padding: 0 4%;
		margin-top: -98upx;
	}
</style>
